<template>
  <div class="table-modal">
    <div class="title">
      <span>表格弹窗</span><CloseOutlined @click="close" class="close" />
    </div>
    <a-form :model="model" ref="formRef">
      <div v-for="(item, index) in list" :key="index">
        <a-form-item :name="['model', index, 'title']" v-if="index === 0">
          <a-input
            v-model:value="item.label"
            allowClear
            @change="
              (val) => {
                changeType(item, val);
              }
            "
            :placeholder="'标题'"
          />
        </a-form-item>
        <div :class="'form-item'" v-else>
          <a-form-item :name="['model', index, 'type']">
            <a-select
              v-model:value="item.type"
              :options="usecomps.options"
              :placeholder="'类型'"
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
            ></a-select>
          </a-form-item>
         
          <a-form-item :name="['model', index, 'label']">
            <a-input
              v-model:value="item.label"
              allowClear
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
              :placeholder="'字段名称'"
            />
          </a-form-item>
           <a-form-item :name="['model', index, 'field']">
            <a-input
              v-model:value="item.field"
              allowClear
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
              :placeholder="'字段键值'"
            />
          </a-form-item>
          <div class="section" :data-set-attr="JSON.stringify(item)">
            <a-form-item
              :name="['model', index, 'options']"
              v-if="
                item.type === 'Select' ||
                item.type === 'CheckboxGroup' ||
                item.type === 'RadioGroup' ||
                item.type === 'Tree' ||
                item.type === 'TreeSelect' ||
                item.type === 'Cascader'
              "
            >
              <a-input
                v-model:value="item.options"
                allowClear
                @change="
                  (val) => {
                    changeType(item, val);
                  }
                "
                :placeholder="'下拉选项'"
              />
            </a-form-item>
          </div>
          <a-form-item :name="['model', index, 'required']">
            <a-checkbox
              v-model:checked="item.required"
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
              >必填</a-checkbox
            >
          </a-form-item>
          <i class="icon iconfont icon-delete" @click="remove(item)"></i>
          <a-form-item
            :name="['model', index, 'optionsLabel']"
            v-if="
              item.type === 'Select' ||
              item.type === 'CheckboxGroup' ||
              item.type === 'RadioGroup' ||
              item.type === 'Tree' ||
              item.type === 'TreeSelect' ||
              item.type === 'Cascader'
            "
          >
            <a-input
              v-model:value="item.optionsLabel"
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
              allowClear
              :placeholder="'下拉选项名称'"
            />
          </a-form-item>
          <a-form-item
            :name="['model', index, 'optionsValue']"
            v-if="
              item.type === 'Select' ||
              item.type === 'CheckboxGroup' ||
              item.type === 'RadioGroup' ||
              item.type === 'Tree' ||
              item.type === 'TreeSelect' ||
              item.type === 'Cascader'
            "
          >
            <a-input
              v-model:value="item.optionsValue"
              @change="
                (val) => {
                  changeType(item, val);
                }
              "
              allowClear
              :placeholder="'下拉选项值'"
            />
          </a-form-item>
        </div>
      </div>
    </a-form>
    <div class="tb">
      <a-button @click="addForm">新增</a-button>
    </div>
  </div>
</template>
<script setup>
import usecomps from "@/utils/usecomps";
import { CloseOutlined } from "@ant-design/icons-vue";
const open = ref(false);
const props = defineProps({
  models: {
    type: Object,
    default: () => {
      return [];
    },
  },
});

const model = ref({});
const formRef = ref();
const emit = defineEmits();

const list = ref([]);

watch(
  () => props.models,
  (val) => {
    list.value = val.attrs;
    // model.value = usecomps.getForm(val.data);
    // open.value = true;
  },
  {
    immediate: true,
  }
);

const remove = (item) => {
  list.value = list.value.filter((a) => a !== item);
  emit("change", list.value);
};

const changeType = (item, val) => {
  if (
    item.type === "Select" ||
    item.type === "CheckboxGroup" ||
    item.type === "RadioGroup" ||
    item.type === "Tree" ||
    item.type === "TreeSelect" ||
    item.type === "Cascader"
  ) {
    item.optionsLabel = "label";
    item.optionsValue = "value";
  }
  emit("change", list.value);
};

/**
 * 打开模态框。
 */
const showModal = () => {
  open.value = true;
};

/**
 * 关闭模态框。
 */
const close = () => {
  //   formRef.value?.resetFields();
  emit("close");
};

const addForm = () => {
  list.value.push({
    label: "",
    field: "",
    type: "Input",
    allowClear: true,
  });
};

defineExpose({
  showModal,
  close,
});
</script>
<style scoped lang="scss">
.table-modal {
  width: 680px;
  padding: 20px;
  position: fixed;
  right: 20px;
  top: 135px;
  background-color: var(--colorBgContainer);
  height: calc(100vh - 175px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.title {
  text-align: center;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-content: center;
  position: relative;
  .close {
    margin-top: -20px;
    cursor: pointer;
  }
}
.form-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 68px 20px;
  align-items: center;
  gap: 0px 10px;
  .icon {
    margin-top: -20px;
    cursor: pointer;
  }
}
.tb {
  display: flex;
  button {
    width: 100%;
  }
}
</style>
